<!--
增加用户
-->
<template>
  <card-page style="width: 600px;margin-left: auto;margin-right: auto;">
    <el-form
      ref="form"
      :model="form" 
      label-width="120px"
      style="width: 600px;margin: 0 auto"
    >
      <el-form-item
        prop="roomNo"
        label="房间编号"
        :rules="[{required: true, message: ' '}]"
      >
        <el-input v-model.trim="form.roomNo" style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="描述">
        <el-input type="textarea" :rows="3" v-model.trim="form.remark" style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item
        prop="berthCount"
        label="床位总共数量"
        :rules="[{required: true, message: ' '}]"
      >
        <el-input-number v-model="form.berthCount" :min="0" :max="10" controls-position="right" />
        <span style="color:#909399">（0表示暂不录入生成床位信息）</span>
      </el-form-item>
      <el-form-item
        v-show="form.berthCount > 0"
        prop="charges"
        label="床位关联费用"
        :rules="[{required: form.berthCount > 0, message: ' '}]"
      >
        <charge-type-select ref="chargeTypeSelect"
          :params="{
            disabled: form.berthCount == 0,
            ...$params
          }" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-check" @click="onSubmit" :loading="submitting">确定</el-button>
      </el-form-item>
    </el-form>

  </card-page>
</template>

<script>
import ChargeTypeSelect from '../ChargeTypeSelect';

export default {
  components: {
    ChargeTypeSelect
  },
  pageProps: {
    title: '增加房间'
  },
  data() {
    return {
      form: {
        roomNo: '',
        remark: '',
        berthCount: 0,
        charges: []
      },
      submitting: false
    }
  },
  methods: {
    onSubmit() {
      this.form.charges = this.form.berthCount > 0 ? this.$refs.chargeTypeSelect.getValues() : [];
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        this.submitting = true;
        let form = {
          ...this.form,
          ...this.$params.parentInfo,
          communityId: this.$params.resthomeId
        };
        form.charges = form.charges.map(c => c.id).join(',');
        const ret = await this.$http.post('/api/community/berth/berthSetting/room/save', form);
        this.submitting = false;
        if (ret.success) {
          this.$message.success('增加房间成功');
          this.closeCurrentPage();
          this.$params.onSuccess();
        }
      });
    }
  }
}
</script>